<?php $this->headLink()->appendStylesheet($this->UiCss('ui.all.css'))
->appendStylesheet($this->Css('button.css'));
$this->headScript()->appendFile($this->js('jquery.js'))
->appendFile($this->js('plugins/jquery.selectboxes.js'))
?>
<style type="text/css">
#classList , #teacherList{float:left}
#classList {background:aqua; margin:10px;padding:2px;overflow:auto; height:300px;width:300px}
#teacherList{background:fuchsia; margin:10px;padding: 5px;width:500px}
#list_teacher span  a {margin:5px;padding:5px;}
#list_teacher a {text-decoration:none;}
#list_teacher a :HOVER {text-decoration:underline; background:green;}
.class_detail {background:#fff}
.class_detail li {cursor:pointer;}
.selected {background:#ff0}
.teacher_selected {background:#ff0}

</style>
<script type="text/javascript">

var teachers_arr = <?php echo $this->teachers?>;
var teachers_sn = <?php echo $this->teachers_sn?>;
$(document).ready(function(){
	$("#year_semester").change(function(){
		$("#setform").submit();
	});
	$("#teacher_select").addOption(teachers_sn,false);
	$("#teacher_select").change(function(){
		var aa = teachers_sn[$(this).val()];
		$("#list_teacher").empty();
		$.each(teachers_arr[aa], function(ii,data){
			$("#list_teacher").append('<span><a href="#" id="t-'+data.sn+'">'+data.name+'</a></span>');
			if (ii%8==7) {
				$("#list_teacher").append('<br/><br/>');
			}
		});
	});

	$(".class_detail li").click(function(){
		$(".selected").removeClass('selected');
		$(this).addClass('selected');
		//alert($(this).attr('id'));
		joinTeacher();
	});

	$("#list_teacher a").live('click',function(){
		$(".teacher_selected").removeClass('teacher_selected');
		$(this).addClass('teacher_selected');
		joinTeacher();
		})

	function joinTeacher() {
		if ($("#list_teacher a").hasClass('teacher_selected')&&
				$(".class_detail li").hasClass('selected')
		) {
			var class_id = $(".selected").attr('id').substr(2);
			var teacher_id = $(".teacher_selected").attr('id').substr(2);
			alert(class_id);
			$(".selected").removeClass('selected');
			$(".teacher_selected").removeClass('teacher_selected');
		}
	}
});
</script>
<form id="setform" action="" method="post">
<p>
<select name="year_semester" id="year_semester">
<?php echo  $this->YearSemesterOptions($this->year_semester) ?>
</select>
</p>
</form>
<div id="classList">
<h2><?php echo $this->translate('class list')?></h2>
<?php foreach($this->class_name as  $id=>$val):?>
<ul><li><?php echo $id?>
<ul class="class_detail">
<?php foreach($val as $class_sn=>$class_name):?>
<li id="c-<?php echo $class_sn?>"> <?php echo $class_name?>
<?php if($this->toturs[$class_sn]):?>
(<?php foreach($this->toturs[$class_sn] as $tt):?>
<?php echo $tt['name']?> <a href="#"  onclick="alert('delete')">刪除</a><?php endforeach;?>)
<?php endif?>
</li>
<?php endforeach;?>
</ul>
</li>
</ul>
<?php endforeach;?>
</div>
<div id="teacherList">
<h2><?php echo $this->translate('teacher list')?></h2>
<p></p><select id="teacher_select"></select></p>
<p></p>
<div id="list_teacher">

</div>
</div>

<div style="clear:both"></div>